<template>
  <nut-sku
      v-model:visible="customBySlot"
      :sku="sku"
      :goods="goods"
      :btnOptions="['buy', 'cart']"
      @selectSku="selectSku"
      @change-stepper="changeStepper"
  >
    <!-- 商品展示区，价格区域 -->
    <template #sku-header-price>
      <div>
        <nut-price :price="goods.price" :needSymbol="true" :thousands="false"> </nut-price>
        <span class="tag"></span>
      </div>
    </template>
    <!-- 商品展示区，编号区域 -->
    <template #sku-header-extra>
      <span class="nut-sku-header-right-extra">{{goods.name}} </span>
    </template>
    <!-- 底部按钮操作区 -->
    <template #sku-operate>
      <div class="sku-operate-box">
        <nut-button class="sku-operate-item" shape="square" type="warning" @click="addToCart">加入购物车</nut-button>
<!--        <nut-button class="sku-operate-item" shape="square" type="primary" @click="goBuy">立即购买</nut-button>-->
      </div>
    </template>
  </nut-sku>
</template>
<script >
import {useGlobal} from "@/stores/useGlobal";
import tool from "@/utils/tool";

const  global = useGlobal()
export default {
  data () {
    return {
      customBySlot: false,
      showAddressPopup: false,
      sku: [],
      goods: {
        skuId: '',
        id: '',
        price: '0',
        imagePath: '',
        name: '',
        unit: '',
        qty: 1
      },
      currentGood: {}
    }
  },
  emits: ['addCart'],
  methods: {
    open (good) {
      this.customBySlot = true
      let units = []
      units.push({
        id: good.unit1,
        name: good.unit1,
        active: true,
      })
      if(good.unit2) {
        units.push({
          id: good.unit2,
          name: good.unit2,
          active: false
        })
      }
      this.sku = [
        {
          id: 1,
          name: '计量单位',
          list: units
        }
      ]
      this.goods.skuId = good.id
      this.goods.id = good.id
      this.goods.price = good.price
      this.goods.spec = good.spec
      this.goods.imagePath = good.imgUrl
      this.goods.name = good.name
      this.goods.unit1 = good.unit1
      this.goods.unit2 = good.unit2
      this.currentGood = good
    },
    add (val) {

    },
    reduce (val) {},
    selectSku (ss) {
      const { sku, skuIndex, parentSku, parentIndex } = ss;
      if (sku.disable) return false;
      this.sku[parentIndex].list.forEach((s) => {
        s.active = s.id === sku.id;
      });
    },
    changeStepper (op) {
      this.goods.qty = op
    },
    async addToCart () {
      let unit = this.sku[0].list.filter(row => {
        return row.active === true
      })
      let cart = {
        invId: this.goods.id,
        unit: unit[0].name,
        qty: this.goods.qty,
      }
      this.customBySlot = false
      await tool.addCart(cart)
      this.$emit('addCart')
    },
    goBuy () {

    },
  }
}

</script>

<style>
.sku-operate-box {
  width: 100%;
  display: flex;
  padding: 8px 10px;
  box-sizing: border-box;
}
.sku-operate-item {
  flex: 1;
}
.sku-operate-item:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.sku-operate-item:last-child {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
</style>
